import HDataTable from "@/components/ant-ext-table/HDataTable";
import SysRole from "@/api/sys-role";
import {Form} from "antd";
import RoleEdit from "@/pages/sysRole/edit";
import {DeleteOutlined, PlusSquareOutlined} from "@ant-design/icons";
import RoleMenu from "@/pages/sysRole/roleMenu";
import HAction from "@/components/common/HAction";
import {HDataTableSlice} from "@/components/ant-ext-table/redux/dataTableSlice";
import {Dispatch} from "redux";
import {HTableProps} from "@/components/ant-ext-table/HTable";
import {useDispatch} from "react-redux";

function getColumns(dispatch: Dispatch): HTableProps<any>["columns"] {
    return [
        {
            title: "id",
            dataIndex: 'id',
            width: '80px',
            fixed: 'left'
        }, {
            title: "角色名称",
            dataIndex: 'roleName',
        }, {
            title: "所属部门",
            dataIndex: 'deptName',
        }, {
            title: "创建人名称",
            dataIndex: 'createUserName',
        }, {
            title: "创建时间",
            dataIndex: 'createTime',
        }, {
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            render: (_, record) => (
                <div >
                    <HAction type={"link"}
                        empower={SysRole.EDIT}
                        invalid
                        action={() => dispatch!(HDataTableSlice.actions.doAction({
                            action: SysRole.EDIT,
                            rowKey: SysRole.RowKey,
                            row: record
                        }))}
                        children={'修改'} />
                </div>
            ),
        },
    ]
}

export default function RoleManagement() {
    const [form] = Form.useForm()
    const dispatch = useDispatch()

    return <>
        <RoleEdit/>
        <RoleMenu/>
        <HDataTable
            option={[
                {key: SysRole.ADD, title: "新增", icon: <PlusSquareOutlined/>},
                {
                    key: SysRole.DEL,
                    title: "删除",
                    mode: "only",
                    icon: <DeleteOutlined style={{color: "red"}}/>,
                    confirm: "是否要删除所选数据",
                    action: (data) => {
                        SysRole.delete({
                            body: {id: data.selectRowKeys[0]},
                            success: () => dispatch(HDataTableSlice.actions.setQueryParams({}))
                        })
                    }
                },
                {key: SysRole.ROLE_MENU, title: "分配权限", mode: "only"},
            ]}
            queryForm={{
                form: form,
                item: [
                    {name: "roleName", label: "角色名称"},
                ]
            }}
            unSort={true}
            columns={getColumns(dispatch)} selectMethod={SysRole.selectTablePage}
            rowKey={SysRole.RowKey}
        />
    </>
}